<template>
  <div class="homeView">
   <el-container>
      <el-header>
        <div class="logo" @click="goHome">
         <img src="@/assets/images/logo2.png" alt="">
         <div class="text">
           数据分析~系统管理
         </div>
        </div>
        <div class="upLogin">
          <el-popconfirm title="确定要退出登录？" @confirm="outLogin">
          <el-button type="danger" size="mini" slot="reference">退出登录</el-button>
          </el-popconfirm>
        </div>
      </el-header>

     <el-container class="homeContentr">
      <el-aside :width="iscollapse ? '64px' : '150px'">
         <el-tooltip class="item" effect="dark" content="展开与折叠" placement="right" >
        <div class="fold" @click="clickFold">
          <i class="el-icon-d-arrow-left" v-show="!iscollapse"></i>
          <i class="el-icon-d-arrow-right" v-show="iscollapse"></i>
        </div>
        </el-tooltip>

      <el-menu background-color="#304156"   text-color="rgba(255,255,255,.6)" active-text-color="#00FFFF"
      :collapse="iscollapse" :collapse-transition='collapseFlash' router :default-active="$route.path">
         <el-menu-item index="/all">
            <i class="el-icon-coin"></i>
            <span slot="title">意向客户</span>
         </el-menu-item>

         <el-menu-item index="/add">
            <i class="el-icon-user"></i>
            <span slot="title">添加客户</span>
         </el-menu-item>

         <el-menu-item index="/data">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">数据分析</span>
         </el-menu-item>
      </el-menu>
      </el-aside>
     <router-view></router-view>
      <el-main>

      </el-main>
     </el-container>
   </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      iscollapse: false,
      collapseFlash: false
    }
  },
  methods: {
    clickFold () {
      this.iscollapse = !this.iscollapse
    },
    outLogin () {
      window.sessionStorage.removeItem('token')
      this.$router.push('/login')
      this.$message.success('退出成功')
    },
    // 回到首页
    goHome () {
      this.$router.push('/welcome')
    }
  }
}
</script>

<style lang="less" scoped>
.el-header{
  background-color: #17253F;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo{
    display: flex;
    align-items: center;
    height: 100%;
    img{
      height: 70%;
    }
    .text{
      font-size: 25px;
      color: rgba( 255, 255, 255, .6);
      padding-left: 20px;
    }
  }
}
.el-aside{
  background-color: #304156;
  position: relative;
  .el-menu{
    border-right:none
  }
  .fold{
    position: absolute;
    right: 0;
    top: 30%;
    font-size: 26px;
    background-color: #17253F;
    width: 30px;
    line-height: 60px;
    text-align: center;
    color: #eee;
  }
}
.el-main{
  padding: 0;
}
.el-container{
 background-color: #F8F8F8;
 height: 100%;
}
</style>
